<!DOCTYPE html>
<html lang="zh-HK">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
  <title>韻段離合指數統計工具</title>
  <script src="rhyme-stat.js"></script>
  <script src="index.js"></script>
  <script src="pinyin.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/qieyun"></script>
  <style>
    body {
      margin: 0;
      padding: 1em;
      min-width: 400px;
    }

    h1 {
      margin: 0.2em 0 0.4em;
    }

    @media screen and (max-width: 480px) {
      body {
        padding: 1em 0.5em;
      }

      h1 {
        text-align: center;
      }

      #main {
        column-gap: 0;
      }

      table {
        font-size: 1em;
      }
    }

    p,
    ul,
    li {
      margin: 0.25em 0;
    }

    .inline-note {
      font-size: 75%;
      position: relative;
      bottom: -0.1em;
    }

    #main {
      display: grid;
      grid-auto-flow: dense;
    }

    #main>div>:first-child,
    #main>div>:first-child>:first-child,
    #main>div>:first-child>:first-child>:first-child {
      margin-top: 0;
    }

    #main>div>:last-child,
    #main>div>:last-child>:last-child,
    #main>div>:last-child>:last-child>:last-child,
    .chi2>:last-child {
      margin-bottom: 0;
    }

    .flex-container {
      display: flex;
      flex-wrap: wrap;
    }

    #main,
    .flex-container {
      gap: 1em 2em;
    }

    #main+*,
    .flex-container+* {
      margin-top: 1em;
    }

    #input {
      height: fit-content;
    }

    #input>* {
      margin-bottom: 0.4em;
    }

    #input>*:nth-last-child(n+3) {
      line-height: 0;
    }

    #input>*:nth-last-child(n+3) p {
      line-height: initial;
    }

    textarea,
    button {
      font-size: 1em;
    }

    textarea {
      width: calc(100% - 12px);
      font-family: auto;
      padding: 2px 5px;
      border-width: 1px;
      resize: vertical;
      height: 4.5em;
    }

    .rime-count-only textarea#material {
      height: 13.5em;
    }

    .rime-count-only textarea:not(#material) {
      height: 0em;
    }

    #buttons button:not(:first-of-type) {
      margin-left: 0.5em;
    }

    #options div:not(:last-child) {
      margin-bottom: 0.2em;
    }

    #copy-buttons {
      margin-bottom: 1.5em;
      margin-top: calc((0.25em - 27px) - 1.5em);
      white-space: nowrap;
    }

    #copy-buttons>:not(:last-child) {
      margin-right: 0.5em;
    }

    table,
    th,
    td {
      border: 0 solid;
    }

    table {
      margin-top: 0.33333em;
      border-spacing: 0;
      border-width: 1px 0;
      line-height: 1;
      font-size: 1.125em;
    }

    .narrow1 table {
      font-size: 1em;
    }

    table caption {
      font-size: 1.33333em;
      margin-bottom: 0.375em;
    }

    th,
    td {
      text-align: left;
      font-weight: normal;
      width: 2.5em;
      padding: 9px;
      padding-right: 7px;
    }

    .narrow2 th,
    .narrow2 td {
      width: 2.2em;
    }

    .narrow2 th>:first-child,
    .narrow2 td>:first-child {
      margin-left: -0.15em;
    }

    .narrow2 th:nth-of-type(2),
    .narrow2 td:nth-of-type(2) {
      padding-left: 0px;
      padding-right: 7px;
    }

    th {
      padding-right: 0;
    }

    th:first-of-type,
    td:first-of-type {
      width: auto;
    }

    th:nth-of-type(2),
    td:nth-of-type(2) {
      padding-left: 2px;
      padding-right: 9px;
      width: auto;
    }

    th:nth-of-type(3),
    td:nth-of-type(3) {
      padding-left: 10px;
    }

    th .rime-name {
      display: inline-block;
      margin-right: -5px;
    }

    td .value {
      margin-right: 0.05em;
    }

    td sup,
    td sub {
      display: inline-block;
      width: 2em;
      margin-right: -2em;
      font-size: 0.667em;
      vertical-align: baseline;
      position: relative;
      bottom: 0.667em;
    }

    td sub {
      bottom: -0.333em;
    }

    th:nth-of-type(3),
    td:nth-of-type(3),
    #main:not(.combine) td.cell-diag+td,
    th.dummy.add-border+th,
    td.dummy.add-border+td {
      border-left-width: 1px;
      padding-left: 8px;
    }

    th.dummy.double-border+th,
    td.dummy.double-border+td {
      border-left-width: 3px;
      border-left-style: double;
    }

    tr:nth-of-type(2) td,
    #main:not(.combine) :not(.dummy)+td.cell-diag,
    tr.dummy.add-border+tr td {
      border-top-width: 1px;
      padding-top: 8px;
    }

    tr.dummy.double-border+tr td {
      border-top-width: 3px;
      border-top-style: double;
    }

    th.dummy.gray-border+th,
    td:not(.cell-diag)+td.dummy.gray-border+td {
      border-left-color: #ccc;
    }

    tr.dummy.gray-border+tr td:not(.cell-diag) {
      border-top-color: #ccc;
    }

    .cell-t,
    #main.combine:not(.hide-all-bkgd) .cell-diag,
    #main:not(.hide-half-bkgd):not(.hide-all-bkgd) .cell-diag {
      background: #eff;
    }

    .cell-f,
    .cell-nan {
      background: #fde9e9;
    }

    .cell-f-star {
      background: #fcecfc;
    }

    .cell-t-star {
      background: #eef;
    }

    #main.hide-all-bkgd td {
      background: none;
    }

    h4 {
      margin: 0 0 0.75em;
    }

    .legend:not(.bkgd) .title,
    .legend .icon {
      display: inline-block;
      white-space: nowrap;
    }

    .legend .icon+* {
      line-height: 1;
    }

    .legend.value .title {
      width: 6.25em;
    }

    .legend.chi2 .title {
      width: 4.25em;
    }

    .legends .legend .title {
      font-weight: bold;
    }

    .legend.bkgd .icon {
      width: 1em;
      height: 1em;
      line-height: 1;
      vertical-align: bottom;
      padding: 0.1em;
      margin-left: 2em;
      margin-right: 0.5em;
      text-align: center;
    }

    .legend.bkgd .icon span {
      font-size: 0.75em;
      position: relative;
      top: -0.125em;
    }

    .legend.chi2 {
      padding: 0.5em;
      border: solid 1px #ddd;
    }

    #instruction p {
      margin-top: 0.5em;
    }

    #instruction .indent {
      margin-left: 3em;
      text-indent: -2em;
    }

    #main.phono-desc .hide-if-phono-desc,
    #main:not(.phono-desc) .show-if-phono-desc,
    #main.pinyin .hide-if-pinyin,
    #main:not(.pinyin) .show-if-pinyin,
    #main.rime-name-only .hide-if-rime-name-only,
    #main:not(.rime-name-only) .show-if-rime-name-only,
    #main.rime-count-only .hide-if-rime-count-only,
    #main:not(.rime-count-only) .show-if-rime-count-only,
    #main.rhyme-group .hide-if-rhyme-group,
    #main:not(.rhyme-group) .show-if-rhyme-group,
    #main.combine .hide-if-combine,
    #main:not(.combine) .show-if-combine,
    #main.show-tf .hide-if-tf,
    #main:not(.show-tf) .show-if-tf,
    #main:not(.hide-zero):not(.combine) .show-if-hide-zero-or-combine,
    #main.hide-all-bkgd .hide-if-hide-all-bkgd,
    #main:not(.has-unannotated) .show-if-has-unannotated,
    #main:not(.table-valid) .show-if-table-valid,
    #main.input-invalid .hide-if-input-invalid {
      display: none;
    }

    #main.rime-name-only .empty-if-rime-name-only,
    #main.rime-count-only .empty-if-rime-count-only {
      visibility: hidden;
    }

    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
      -webkit-appearance: none !important;
    }

    input[type="number"] {
      -moz-appearance: textfield;
    }

    input#rhyme-check:checked~.count-total-line,
    input#rhyme-group-check:checked~.show-tf-check-line,
    .dummy {
      display: none;
    }

    code,
    #deriver-code {
      font-size: 1em;
      font-family: Courier New, monospace;
    }

    code {
      background: #eee;
      padding: 0.15em;
      line-height: 1;
    }

  </style>
  <script>window.onresize = arrangeOutput;</script>
</head>

<body>
  <h1>韻段離合指數統計工具</h1>
  <div id="main" class="grid-container" style="grid-template-columns: 400px;">
    <div id="input">
      <div style="display: flex; justify-content: space-between;">
        <p style="text-wrap: nowrap; margin: 0.05em -5em 0 0;">表格標題：</p>
        <input type="text" id="caption-input" placeholder="輸入表格標題……"
          style="width: calc(100% - 12px - 5em); height: 1.1em; font-size: 1em;">
      </div>
      <div>
        <p>① <span class="hide-if-rime-count-only">各韻段的韻腳<span class="hide-if-rime-name-only">（字後可括注<span
                class="show-if-phono-desc">音韻地位</span><span class="show-if-pinyin">漢語拼音</span>或韻類）</span><span
              class="show-if-rime-name-only">所屬韻類</span></span><span
            class="show-if-rime-count-only">韻次表（前兩列標注韻類、字次）</span>：
        </p>
        <textarea id="material"></textarea>
      </div>
      <div class="empty-if-rime-count-only">
        <p>② <span class="hide-if-rime-name-only">韻腳</span><span
            class="show-if-rime-name-only">韻類</span>中要跳過的字符（視作和換行等同）：</p>
        <textarea id="delimiters" style="height: 1.5em;"></textarea>
      </div>
      <div class="empty-if-rime-name-only empty-if-rime-count-only">
        <p>③ 各韻腳所屬<span class="show-if-phono-desc">音韻地位（描述或編碼）</span><span class="show-if-pinyin">漢語拼音</span>或韻類</span>：
        </p>
        <textarea id="dictionary"></textarea>
      </div>
      <div class="empty-if-rime-name-only empty-if-rime-count-only">
        <p>④ 由<span class="show-if-phono-desc">音韻地位</span><span class="show-if-pinyin">漢語拼音</span>推導韻類的代碼（留空則導出<span
            class="show-if-phono-desc">韻名</span><span class="show-if-pinyin">韻母</span>）：</p>
        <textarea id="deriver-code"></textarea>
      </div>
      <div>
        <p>⑤ 要在結果中顯示的韻類（留空則顯示所有韻類）：</p>
        <textarea id="rime-names" style="height: 1.5em;" placeholder="輸入要在結果中顯示的韻類……"
          onblur="this.value=this.value.replace(/[\t\n ]+/g, ' ').replace(/ \|\\ /g, ' | \\ ').trim()"></textarea>
      </div>
      <div>
        <p>⑥ 韻類名中要縮小字號的字符：</p>
        <textarea id="rime-names-mini" style="height: 3.5em;" placeholder="輸入韻類名中要縮小字號的字符……"></textarea>
      </div>
      <div id="buttons" style="white-space: nowrap; margin: 0.7em 0 0.6em;">
        <button type="button" onclick="gen(true, true);">生成離合指數表</button><button type="button"
          onclick="if (writeSampleData()) gen(true);">加載示例</button><button type="button"
          class="hide-if-rime-name-only hide-if-rime-count-only"
          onclick="if (writeSampleData(false, true)) gen(true);">加載示例（不用③④）</button><button type="button"
          class="show-if-rime-count-only" onclick="gen(true, true, true);">修正字次並生成</button>
      </div>
      <div id="options">
        <div style="margin-bottom: 0.3em; text-wrap: nowrap;">輸入：<input type="radio" name="annotation-type"
            id="phono-desc-check" checked="checked" style="margin-left: 1px;" onclick="gen(true, true);"><label
            for="phono-desc-check">音韻地位</label>
          <input type="radio" name="annotation-type" id="pinyin-check" onclick="gen(true, true);"><label
            for="pinyin-check">漢語拼音</label>
          <input type="radio" name="annotation-type" id="rime-name-only-check" onclick="gen(true, true);"><label
            for="rime-name-only-check">韻類名</label>
          <input type="radio" name="annotation-type" id="rime-count-only-check" onclick="gen(true, true);"><label
            for="rime-count-only-check">韻次表</label>
        </div>
        <div style="margin-bottom: 0.3em;">算法：<input type="radio" name="idx-type" id="rhyme-check" checked="checked"
            style="margin-left: 1px;" onclick="gen();"><label for="rhyme-check">韻離合指數</label> <input type="radio"
            name="idx-type" id="rhyme-group-check" onclick="gen();"><label for="rhyme-group-check">轍離合指數</label>
        </div>
        <div class="show-if-rhyme-group">所有韻類總字次：<input type="number" id="countTotal"
            style="width: 4em; margin: -1em 0;" oninput="gen();" onchange="gen(false, true);">
        </div>
        <div class="hide-if-rhyme-group"><input type="checkbox" id="show-tf-check" onclick="gen();"><label
            for="show-tf-check">韻離合指數後添加「T、F」（兩韻通、兩韻分）</label>
        </div>
        <!--
        <div><input type="checkbox" id="combine-check" onclick="gen();"><label for="combine-check">合併押韻次數和離合指數</label>
        </div>
        <div><input type="checkbox" id="hide-half-bkgd-check" onclick="gen();"><label for="hide-half-bkgd-check"><span
          class="show-if-combine">不合併時，</span>隱藏對角線左下的背景顏色</label>
        </div>
        -->
        <div><input type="checkbox" id="hide-zero-check" onclick="gen();" checked><label for="hide-zero-check"><span
              class="show-if-combine">不合併時，</span>押韻次數爲 0 則省略</label>
        </div>
        <div><input type="checkbox" id="hide-all-bkgd-check" onclick="gen();"><label
            for="hide-all-bkgd-check">隱藏<!--所有-->背景顏色</label>
        </div>
        <div><input type="checkbox" id="simplified-check" onclick="gen();"><label
            for="simplified-check">表格使用簡體字體</label>
        </div>
      </div>
    </div>
    <div id="output" style="display: none;">
      <div>
        <div class="flex-container">
          <div style="width: max-content;">
            <div id="copy-buttons" class="hide-if-input-invalid">
              <button type="button" class="show-if-has-unannotated" onclick="copy(true);">複製無標注的字</button><button
                type="button" class="show-if-table-valid" onclick="copy();">複製韻譜<span
                  class="inline-note">韻腳+韻類</span></button><button type="button" class="show-if-table-valid"
                onclick="copy(false, true);">複製韻譜<span class="inline-note">僅韻類</span></button>
            </div>
            <table id="table"></table>
          </div>
          <div class="legend chi2 show-if-table-valid hide-if-rhyme-group" style="align-self: flex-end;">
            <h4><i>χ</i>² 臨界值簡表</h4>
            <p><span class="title"><i>p</i> 值</span><i>χ</i>² 臨界值</p>
            <p><span class="title">0.1</span>4.605</p>
            <p><span class="title">0.05</span>5.991</p>
            <p><span class="title">0.025</span>7.378</p>
            <p><span class="title">0.01</span>9.21</p>
            <p><span class="title">0.005</span>10.597</p>
            <p>（<i>p</i> 越小，標準越嚴）</p>
          </div>
        </div>
        <div class="legends show-if-table-valid">
          <h4>表格說明</h4>
          <div class="legend value">
            <p><span class="title">最左側：</span>該<span class="hide-if-rhyme-group">韻</span><span
                class="show-if-rhyme-group">轍</span>韻腳字次</p>
            <p class="show-if-combine"><span class="title">表格內部：</span><span class="hide-if-rhyme-group">韻</span><span
                class="show-if-rhyme-group">轍</span>離合指數 <i>I</i></p>
            <p class="hide-if-combine"><span class="title">對角線：</span>該<span class="hide-if-rhyme-group">韻</span><span
                class="show-if-rhyme-group">轍</span>自押次數<span class="show-if-hide-zero-or-combine">（爲 0 則省略）</span></p>
            <p><span class="hide-if-combine title">對角線左下：</span><span class="show-if-combine title">上標數字：</span>兩<span
                class="hide-if-rhyme-group">韻</span><span class="show-if-rhyme-group">轍</span>互押次數<span
                class="show-if-hide-zero-or-combine">（爲 0
                則省略）</span>
            </p>
            <p class="hide-if-combine"><span class="title">對角線右上：</span><span class="hide-if-rhyme-group">韻</span><span
                class="show-if-rhyme-group">轍</span>離合指數 <i>I</i></p>
            <p class="hide-if-rhyme-group"><span class="title">下標數字：</span><i>χ</i>² 值</p>
          </div>
          <div class="legend bkgd hide-if-hide-all-bkgd">
            <p class="title"><span class="show-if-tf hide-if-rhyme-group">下標字母、</span>單元格背景<span
                class="hide-if-rhyme-group">、星號</span>：</p>
            <p><span class="cell-t icon"><span class="show-if-tf hide-if-rhyme-group">T</span></span><span>兩<span
                  class="hide-if-rhyme-group">韻通（<i>I</i> ≥ 90 或 <i>I</i> ≥ 50 且 <i>χ</i>² &lt; 4.605）</span><span
                  class="show-if-rhyme-group">轍合（<i>I</i> ≥ 2）</span></span></p>
            <p><span class="cell-t-star icon"><span class="show-if-tf hide-if-rhyme-group">T</span><span
                  class="hide-if-rhyme-group">*</span></span><span>兩<span
                  class="hide-if-rhyme-group">韻通，但如果標準定得更嚴則不通</span><span class="show-if-rhyme-group">轍近（<i>I</i>
                  1.5~2）</span></span></p>
            <p><span class="cell-f-star icon"><span class="show-if-tf hide-if-rhyme-group">F</span><span
                  class="hide-if-rhyme-group">*</span></span><span>兩<span
                  class="hide-if-rhyme-group">韻分，但如果標準定得更寬則通</span><span class="show-if-rhyme-group">轍近（<i>I</i>
                  1~1.5）</span></span></p>
            <p><span class="cell-f icon"><span class="show-if-tf hide-if-rhyme-group">F</span></span><span>兩<span
                  class="hide-if-rhyme-group">韻分（<i>I</i> &lt; 50 或 <i>I</i> &lt; 90 且 <i>χ</i>² &gt;
                  10.597）</span><span class="show-if-rhyme-group">轍遠（<i>I</i> &lt; 1）</span></span></p>
          </div>
        </div>
      </div>
    </div>
    <div id="instruction" style="align-self: flex-end; max-width: 800px;">
      <h4>使用說明</h4>
      <p>文本框輸入格式：</p>
      <p class="indent">①：<span class="hide-if-rime-count-only">每行是一個韻段<span
            class="hide-if-rime-name-only">。括注用全半角括號均可</span><span
            class="show-if-rime-name-only">，僅輸入韻類而不輸入韻腳。韻類之間可以用空格、製表符或全半角逗號分隔，韻類名皆爲單字時也可以不分隔</span></span><span
          class="show-if-rime-count-only">韻次表（韻次即押韻次數）可以複製自本工具生成的或其他著作中的離合指數表，格式如下：第一行爲各列的韻類名，之後的每行，前兩個值爲該行的韻類及其字次，之後爲韻次值。字次可以是
          <code>/</code>（用於例外押入的韻類），韻次爲 0
          時可以省略。第一行可以省略，對角線右上的值也可以省略，它們在生成時均會被忽略。值之間可以用空格、製表符或全半角逗號分隔，韻類名和字次之間也可以不分隔</span>
      </p>
      <p class="indent hide-if-rime-name-only hide-if-rime-count-only">③：每行是一個韻腳。韻腳字和標注（<span
          class="show-if-phono-desc">音韻地位</span><span
          class="show-if-pinyin">漢語拼音</span>或韻類）之間可以用空格、製表符或全半角逗號分隔，也可以不分隔，還可以是韻腳字後括注<span
          class="show-if-phono-desc">音韻地位</span><span class="show-if-pinyin">漢語拼音</span>或韻類（<span
          class="show-if-pinyin">如</span>同<a href="https://nk2028.shn.hk/qieyun-autoderiver/">切韻音系自動推導器</a>匯出的格式）</p>
      <p class="indent hide-if-rime-name-only hide-if-rime-count-only">④：<span class="show-if-phono-desc">同<a
            href="https://nk2028.shn.hk/qieyun-autoderiver/">切韻音系自動推導器</a>所用的推導方案代碼格式</span><span
          class="show-if-pinyin">外部傳入的參數爲 <code>漢語拼音</code>，內含 3
          個屬性：<code>聲母</code>、<code>韻母</code>、<code>聲調</code></span>，代碼返回韻類名</p>
      <p class="indent">⑤：韻類之間用空格分隔（輸入製表符會自動替換爲空格），也可在韻類之間插入下列符號（兩側需有空格）以添加框線：<code>|</code> 黑色單線、<code>|_</code>
        灰色單線、<code>||</code> 黑色雙線，或插入 <code>\</code> 以省略右側列（當右側爲例外押入的韻類時可以使用）
      </p>
      <p class="hide-if-rime-name-only hide-if-rime-count-only">若標注已經是韻類名，則會自動跳過④的推導，如此可以直接指定一些字的韻類。<span
          class="show-if-phono-desc">標注音韻地位（描述或編碼）的格式應與 <a
            href="https://nk2028.shn.hk/qieyun-js/classes/____.html">qieyun-js</a> 相同。</span><span
          class="show-if-pinyin">標注漢語拼音時，聲調可以用符號附加在字母上，也可以用數字寫在音節末尾。</span></p>
      <p class="hide-if-rime-name-only hide-if-rime-count-only">①中的標注優先於③中的標注。若有韻腳字①、③中都無標注，則在生成離合指數表時會報錯並輸出。<span
          class="show-if-phono-desc">將輸出的字在<a href="https://nk2028.shn.hk/qieyun-autoderiver/">推導器</a>中用
          <code>return 音韻地位.描述;</code>
          推導，匯出的結果可直接加入③中。</span></p>
      <p class="hide-if-rime-name-only hide-if-rime-count-only">
        實際上大多數字只需在③中標注，但對於韻母有多讀的多音字，應在①中指定讀音。當然，也可在①中爲所有字標注而不使用③④，此時③④可以留空。</p>
      <p class="show-if-rime-count-only">「修正字次並生成」按鈕用于根据表中的韻次數據驗算行首的字次。</p>
      <p>本頁面不使用緩存，各文本框中輸入的資料請在本地妥善保存！</p>
      <p>本頁面原始碼公開於 <a href="https://github.com/nk2028/rhyme-stat">GitHub</a></p>
    </div>
  </div>
  <script>
    new ResizeObserver(arrangeOutput).observe(document.getElementById('input'));
    loadInputs();
    writeSampleData(true);
    gen();
  </script>
</body>

</html>
